<script lang="ts" setup>
interface User {
    id: number
    date: string
    name: string
    address: string
    hasChildren?: boolean
    children?: User[]
}

const load = (
    row: User,
    treeNode: unknown,
    resolve: (date: User[]) => void
) => {
    setTimeout(() => {
        resolve([
            {
                id: 31,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                id: 32,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ])
    }, 1000)
}
const tableData1: User[] = [
    {
        id: 1,
        date: '2016-05-02',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: '2016-05-04',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: '2016-05-01',
        name: 'wangxiaohu',
        hasChildren: true,
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 4,
        date: '2016-05-03',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}
import { reactive, ref } from 'vue'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

const numberValidateForm = reactive({
    age: '',
})
const value1 = ref(true)

interface User {
    date: string
    name: string
    address: string
}
</script>

<template>
    <el-button type="primary" @click="dialogFormVisible = true">
        添加权限
    </el-button>
    <el-dialog v-model="dialogFormVisible" title="新增权限点" width="500">
        <el-form :model="form">

            <el-form ref="formRef" style="max-width: 600px" :model="numberValidateForm" label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="权限名称" prop="age" :rules="[
                    { required: true, message: '权限名称不能为空' },
                    { type: 'any' },
                ]">
                    <el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="权限标识" prop="age" :rules="[
                    { required: true, message: '权限标识不能为空' },
                    { type: 'any' },
                ]">
                    <el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
                </el-form-item>

                <el-form-item label="描述" prop="age">
                    <el-input type="textarea" v-model.number="numberValidateForm.age" autocomplete="off" />
                </el-form-item>
                <el-form-item label="开启">
                    <el-switch v-model="value1" />
                </el-form-item>
            </el-form>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">确定</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    取消
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="date" label="名称" />
        <el-table-column prop="name" label="标识" />
        <el-table-column prop="address" label="描述" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" size="small">
                    添加
                </el-button>
                <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button link type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<style lang="less" scoped></style>
